<template>
  <el-dialog
    class="base-dialog"
    v-bind="$attrs"
    :model-value="modelValue"
    :width="width"
    @close="handleClose"
  >
    <template #header>
      <slot name="header"></slot>
    </template>
    <slot></slot>
    <template v-if="hasFooter" #footer>
      <slot name="footer"></slot>
    </template>
    <template v-else #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
defineOptions({
  name: 'BaseDialog',
});

const emits = defineEmits(['update:modelValue', 'confirm', 'cancel']);

defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: '40%',
  },
});

const slots = useSlots();

const hasFooter = computed(() => slots.footer !== undefined);

const handleClose = () => {
  emits('update:modelValue', false);
};

const handleCancel = () => {
  emits('cancel');
  handleClose();
};

const handleConfirm = () => {
  emits('confirm', handleClose);
};
</script>
<style lang="scss">
.base-dialog {
  font-size: 13px;

  .el-dialog__body {
    padding-bottom: 0;
  }
}
</style>
